<template>
  <section>
    <InChinaMeal v-if="mealType == 1" @changeMealType="changeMealType"></InChinaMeal>
    <OutChinaMeal v-if="mealType == 2" @changeMealType="changeMealType"></OutChinaMeal>
  </section>
</template>
  
<script>
import { onMounted, reactive, toRefs } from 'vue'
import InChinaMeal from './inChinaMeal'
import OutChinaMeal from './outChinaMeal'
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'meal',

  components: {
    InChinaMeal,
    OutChinaMeal
  },

  setup() {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      mealType: '',
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '',
        show: false,
      });

      state.mealType = route.query.mealType || 1
    })

    const changeMealType = (type) => {
      state.mealType = type
      addCacheRoute()
    }

    const addCacheRoute = () => {
      store.commit("addCacheRoute", 'meal');
    }

    return {
      ...toRefs(state),
      changeMealType,
    }
  }
}
</script>
  
<style lang="scss" scoped>
</style>